<template>
  <div class="warpper">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="Info" name="first">
        <div class="form">
          <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="160px" style="width:85%"
            validate-on-rule-change="false">

            <el-form-item label="Company Name" prop="name" style="width:460px">
              <el-input v-model="formData.name" autocomplete="off" />
            </el-form-item>


            <el-form-item label="Attention Name" prop="attention_name" style="width: 460px;">
              <el-input v-model="formData.attention_name" autocomplete="off" />
            </el-form-item>


            <el-form-item label="Email" prop="email" style="width: 460px;">
              <el-input v-model="formData.email"></el-input>
            </el-form-item>

            <el-form-item label="Tel" prop="tel" style="width: 460px;">
              <el-input v-model="formData.tel"></el-input>
            </el-form-item>

            <el-form-item label="Address" prop="address" style="width: 460px;">
              <el-input v-model="formData.address"></el-input>
            </el-form-item>


            <el-form-item label="Currency" prop="currency">
              <el-select v-model="formData.currency" placeholder="Choose Currency" style="width:300px">
                <el-option v-for="item in currency" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="Credit Term" prop="Credit Term">
              <el-input-number v-model="formData.credit_term" :min="1"></el-input-number>
              <el-select v-model="formData.credit_term_type" placeholder="Choose Credit Term" style="width: 115px;">
                <el-option v-for="item in credit_term_type" :key="item.id" :label="item.name" :value="item.name"
                  style="width: 115px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Delivery time" prop="Delivery time">
              <el-input-number v-model="formData.deliverytime" :min="1"></el-input-number>
              <el-select v-model="formData.delivery_uom" placeholder="Choose Delivery time" style="width: 115px;">
                <el-option v-for="item in delivery_uom" :key="item.id" :label="item.name" :value="item.name"
                  style="width: 115px;">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save('ruleForm')" style="margin-left: 170px;"
              :disabled="isubmit">Submit</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="SKU" name="second" :disabled="isNew">
        <ssku :id="id" />
      </el-tab-pane>
      <el-tab-pane label="Additional Contact" name="third" :disabled="isNew">
        <sattention :id="id" />
      </el-tab-pane>
      <el-tab-pane label="Contract" name="five" :disabled="isNew">
        <scontract :id="id" />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import CURD from "@/mixin/CURD";
  import scontract from "@/components/supplierinfo/contract.vue"
  import ssku from "@/components/supplierinfo/sku.vue"
  import sattention from "@/components/supplierinfo/attention.vue"
  import {
    index,
    show,
    update
  } from "@/api/supplier";
  export default {
    name: "supplierIndex",
    components: {
      sattention,
      scontract,
      ssku
    },
    mixins: [CURD],
    data() {
      return {
        isubmit: false,
        activeName: 'first',
        salesman: [{
          id: 1,
          name: "LiLei",
        }, {
          id: 2,
          name: "Haimei",
        }, {
          id: 3,
          name: "Jack ma",
        }],
        delivery_uom: [{
          id: 1,
          name: "Day",
        }],
        credit_term_type: [{
          id: 1,
          name: "Day",
        }, {
          id: 2,
          name: "Week",
        }, {
          id: 3,
          name: "Month",
        }],
        currency: [{
          id: 1,
          name: "SGD",
        }, {
          id: 2,
          name: "USD",
        }],
        id: null,
        isEdit: false,
        isNew: false,
        formData: {
          deliverytime: 1,
          credit_term: 1,
          delivery_uom: "Day",
          credit_term_type: "Day",
          currency: "SGD",
          address: "",
          tel: "",
          email: "",
          attention_name: "",
          name: "",
        },
        module: "supplier",
        newTitle: "New supplier",
        editTitle: "Edit supplier",
        deptOptions: [],
      };
    },
    async created() {
      this.id = this.$route.query.id
      if (this.id > 0) {
        this.isEdit = true

        const {
          data
        } = await show(this.id);
        this.formData = data;
        this.$refs.ruleForm.clearValidate();
      } else {
        this.isNew = true
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      async save(form) {
        this.$refs[form].validate(async (valid) => {
          if (valid) {
            try {
              this.isubmit = true
              if (this.isEdit) {
                let {
                  update
                } = require(`@/api/${this.module}`);
                let {
                  info
                } = await update(this.formData);
                this.$message.success("Edit successfully");
                this.$router.push({
                  path: '/supplier/supplierlist',
                })
              }
              if (this.isNew) {
                let {
                  store
                } = require(`@/api/${this.module}`);
                let info1 = await store(this.formData);
                this.$message.success("Add successfully");
                if (info1.info.id) {
                  setTimeout(() => {
                    this.$router.push({
                      path: '/supplier/editsupplier',
                      query: {
                        id: info1.info.id
                      }
                    })
                  }, 600);
                }
              }
              this.isEdit = false;
              this.isNew = false;
              this.isubmit = false
            } catch (error) {
              let result = error.response.data;
              this.$message.error(result.info);
            }
          } else {
            this.$message.error("Data verification error, please input according to the specified rules");
            this.isubmit = false
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .customWidth {
    width: 80%;
  }
</style>
<style>
  .warpper {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .table,
  .toolbar,
  .page {
    margin: 20px;
  }

  .toolbar {
    margin-top: 10px;
    padding: 5px;
  }

  .table {
    margin-bottom: 10px;
  }

  .page {
    margin-top: 10px;
    text-align: center;
  }

  .green-text {
    color: green;
  }

  .red-text {
    color: red;
  }

  .yellow-text {
    color: yellow;
  }
</style>